<template>
  <div class="main-nav relative pl-20 pr-20">
    <template v-if="!around">
      <span class="arrow-left absolute">
        <i class="el-icon-arrow-left arrow" @click="scrollX('left')" />
      </span>
      <span class="arrow-right absolute">
        <i class="el-icon-arrow-right arrow" @click="scrollX('right')" />
      </span>
    </template>
    <div class="w-100 flex overflow-hidden">
      <div ref="headerMenu" class="main-nav-scroll flex-1 flex w-100">
        <el-menu
          ref="topNavMenu"
          mode="horizontal"
          background-color="#030F30"
          text-color="#fff"
          active-text-color="#DDECF4"
          :default-active="$route.path"
          unique-opened
          router
          class="flex"
          :class="around ? 'justify-around' : ''"
        >
          <template v-for="item in getMenu">
            <template v-if="item.children">
              <el-submenu
                v-if="item.display"
                :key="item.funcId"
                :index="item.funcId"
                popper-class="main-menu"
              >
                <template v-slot:title>
                  <i
                    v-if="item.icon"
                    :class="[item.icon.includes('el-icon') ? '' : 'iconfont', item.icon]"
                    class="mr-5"
                  />
                  <span slot="title">{{ $t(item.enName) }}</span>
                </template>
                <template v-for="subItem in item.children">
                  <el-submenu
                    v-if="subItem.children && subItem.display"
                    :key="subItem.funcId"
                    :index="subItem.funcId"
                  >
                    <template v-slot:title>
                      <i
                        v-if="subItem.icon"
                        :class="[subItem.icon.includes('el-icon') ? '' : 'iconfont', subItem.icon]"
                        class="mr-5"
                      />
                      <span slot="title">{{ $t(subItem.enName) }}</span>
                    </template>
                    <el-menu-item
                      v-for="threeItem in subItem.children"
                      v-show="threeItem.display"
                      :key="threeItem.funcId"
                      :index="threeItem.path"
                    >
                      <template v-slot:title>
                        <i
                          v-if="threeItem.icon"
                          :class="[
                            threeItem.icon.includes('el-icon') ? '' : 'iconfont',
                            threeItem.icon
                          ]"
                          class="mr-5"
                        />
                        <span slot="title">{{ $t(threeItem.enName) }}</span>
                      </template>
                    </el-menu-item>
                  </el-submenu>
                  <template v-else>
                    <el-menu-item
                      v-if="subItem.display"
                      :key="subItem.funcId"
                      :index="subItem.path"
                    >
                      <template v-slot:title>
                        <i
                          v-if="subItem.icon"
                          :class="[
                            subItem.icon.includes('el-icon') ? '' : 'iconfont',
                            subItem.icon
                          ]"
                          class="mr-5"
                        />
                        <span slot="title">{{ $t(subItem.enName) }}</span>
                      </template>
                    </el-menu-item>
                  </template>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item v-if="item.display" :key="item.funcId" :index="item.path">
                <i
                  v-if="item.icon"
                  :class="[item.icon.includes('el-icon') ? '' : 'iconfont', item.icon]"
                  class="mr-5"
                />
                <span slot="title">{{ $t(item.enName) }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import BetterScroll from 'better-scroll'

  export default {
    data() {
      return {
        bs: null,
        around: true
      }
    },
    computed: {
      ...mapGetters(['getMenu'])
    },
    watch: {
      $route(val) {
        setTimeout(() => {
          const isactive = document.querySelector('.is-active')
          isactive && this.bs && this.bs.scrollToElement('.is-active', 300)
        }, 300)
      }
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initBs()
      })
      /* 窗口改变事件*/
      this.getScale()
      window.addEventListener('resize', this.getScale)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.getScale)
    },
    methods: {
      getScale() {
        const ww = document.querySelector('.main-nav-scroll').getBoundingClientRect().width
        const menuLen = this.getMenu.length || 0
        this.around = ww >= menuLen * 161
        const _this = this
        setTimeout(() => {
          const isactive = document.querySelector('.is-active')
          isactive && _this.bs && _this.bs.scrollToElement('.is-active', 300)
        }, 300)
      },
      initBs() {
        setTimeout(() => {
          const wrapper = document.querySelector('.main-nav-scroll')
          this.bs = new BetterScroll(wrapper, {
            scrollX: true,
            scrollY: false,
            mouseWheel: true
          })
          const menuItems = Array.from(this.$refs.topNavMenu.$el.children)
          if (menuItems.length) {
            const tmpOffsetWidth = menuItems.reduce((curr, next) => {
              return curr + next.offsetWidth
            }, 0)
            this.$refs.topNavMenu.$el.style.width = `${tmpOffsetWidth}px`
          }
          this.bs.refresh()
          this.getScale()
        }, 300)
      },
      scrollX(side) {
        const totalWidth = parseInt(this.$refs.topNavMenu.$el.style.width)
        const item = parseInt(totalWidth / this.getMenu.length)
        let xNum = 0
        if (side === 'right') {
          xNum = this.bs.x - item
          xNum = xNum < this.bs.maxScrollX ? this.bs.maxScrollX : xNum
        } else {
          xNum = this.bs.x + item
          xNum = xNum > 0 ? 0 : xNum
        }
        this.bs.scrollTo(xNum, 0, 300)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .arrow-left,
  .arrow-right {
    height: 60px;
    line-height: 60px;
    top: 0;
    .arrow {
      cursor: pointer;
    }
  }
  .arrow-left {
    left: 0;
  }
  .arrow-right {
    right: 0;
  }
  .el-menu-item i {
    color: #fff;
  }
</style>
